<template>
  <div class="content">
    <el-form
      :model="parkBaseInfo"
      :rules="rules"
      ref="parkBaseInfo"
      label-width="140px"
      size="small"
      class="zb-form"
      label-position="left"
    >
      <el-form-item label="停车场名称" prop="name" placeholder="请填写停车场名称">
        <el-input v-model.trim="parkBaseInfo.name"></el-input>
      </el-form-item>

      <el-form-item label="停车场图片" prop="picStr" class="zb-upload-img">
        <el-input v-model="parkBaseInfo.picStr" v-show="false"></el-input>
        <el-upload
          class="upload-demo"
          action
          :on-change="handleChange"
          :auto-upload="false"
          :file-list="parkBaseInfo.uiOpt.parkinglotImgfileList"
          list-type="picture"
        >
          <el-button size="small" type="primary">选取图片</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过900kb，最佳比例为16:9
            <a
              href="javascript:;"
              class="demo-icon"
              @click="showParkinglotImg"
            >查看图例</a>
          </div>
        </el-upload>
      </el-form-item>

      <div class="el-form--inline zb-inline-form hide_label">
        <el-form-item label="停车场区域" prop="uiOpt.areaSelected[0]">
          <el-select
            placeholder="省"
            v-model="parkBaseInfo.uiOpt.areaSelected[0]"
            @change="getAreaLv2"
          >
            <el-option
              v-for="(item, index) in parkBaseInfo.uiOpt.areaAreaData[0]"
              :label="item.localName"
              :value="item.pkAreaId"
              :key="item.pkAreaId"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="区域" prop="uiOpt.areaSelected[1]">
          <el-select
            placeholder="市"
            v-model="parkBaseInfo.uiOpt.areaSelected[1]"
            @change="getAreaLv3"
          >
            <el-option
              v-for="(item, index) in parkBaseInfo.uiOpt.areaAreaData[1]"
              :label="item.localName"
              :value="item.pkAreaId"
              :key="item.pkAreaId"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="区域" prop="uiOpt.areaSelected[2]">
          <el-select
            placeholder="区"
            v-model="parkBaseInfo.uiOpt.areaSelected[2]"
            @change="setParkBaseInfoAreaData"
          >
            <el-option
              v-for="(item, index) in parkBaseInfo.uiOpt.areaAreaData[2]"
              :label="item.localName"
              :value="item.pkAreaId"
              :key="item.pkAreaId"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>

      <el-form-item label="停车场详细地址" prop="address">
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请填写停车场详细地址"
          v-model="parkBaseInfo.address"
        ></el-input>
      </el-form-item>

      <el-form-item label="车场经纬度" class="map-form-item" prop="uiOpt.gpsXY">
        <el-input placeholder="请填写车场经纬度(高德地图)" v-model="parkBaseInfo.uiOpt.gpsXY"></el-input>
        <a href="javascript:;" class="map-btn" @click="initParkMap">点击选择</a>
      </el-form-item>

      <el-form-item label="总车位数" prop="slotsNumber">
        <el-input
          type="number"
          placeholder="请填写停车场总车位数"
          v-model.number="parkBaseInfo.slotsNumber"
          @blur="setFixNumber"
        ></el-input>
      </el-form-item>

      <el-form-item label="临停车位数" prop="tempCarports">
        <el-input
          type="number"
          min="1"
          max="10"
          placeholder="请填写停车场临停车位数"
          v-model.number="parkBaseInfo.tempCarports"
          @blur="setFixNumber"
        ></el-input>
      </el-form-item>

      <el-form-item label="固定车位数">
        <el-input type="number" :disabled="true" v-model.number="parkBaseInfo.fixNumber"></el-input>
      </el-form-item>

      <el-form-item label="车场负责人" prop="parkingSupervisor">
        <el-input placeholder="请填写负责人姓名" v-model="parkBaseInfo.parkingSupervisor"></el-input>
      </el-form-item>

      <el-form-item label="负责人手机号码" prop="parkingSupervisorPhone">
        <el-input
          type="number"
          placeholder="请填写负责人手机号码"
          v-model.number="parkBaseInfo.parkingSupervisorPhone"
        ></el-input>
      </el-form-item>

      <el-form-item label="停车场类型">
        <el-radio-group v-model="parkBaseInfo.parkType">
          <el-radio :label="0">商场</el-radio>
          <el-radio :label="1">住宅</el-radio>
          <el-radio :label="2">商住一体</el-radio>
          <el-radio :label="4">写字楼</el-radio>
          <el-radio :label="5">社会公共</el-radio>
          <el-radio :label="3">医院及枢纽</el-radio>
          <el-radio :label="7">住宅写字楼</el-radio>
          <el-radio :label="8">商场写字楼</el-radio>
          <el-radio :label="6">其他</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="默认车牌简称" class="short-input" prop="uiOpt.defaultProvince">
        <el-input :maxlength="1" placeholder="简称" v-model="parkBaseInfo.uiOpt.defaultProvince"></el-input>
      </el-form-item>

      <!-- <el-form-item
        label="停车场协议"
        prop="uiOpt.protocolKey"
        v-if="false"
      >
        <el-input
          v-model="parkBaseInfo.uiOpt.protocolKey"
          v-show="false"
        ></el-input>
        <el-upload
          class="upload-demo"
          ref="protocolUpload"
          action="mgr/operatorPark/uploadParkAgreement"
          :on-change="protocolHandleChange"
          :on-success="protocolUploadSuccess"
          :on-remove="protocolRemove"
          :auto-upload="false"
          :file-list="parkBaseInfo.uiOpt.protocolList"
        >
          <el-button
            size="small"
            type="primary"
          >上传协议</el-button>
          <div
            slot="tip"
            class="el-upload__tip"
          >下载协议模版并盖章上传 <a
              href="javascript:;"
              class="demo-icon"
              @click="downloadParkinglotProtocol"
            >下载协议模版</a></div>
        </el-upload>
      </el-form-item>-->

      <el-form-item size="medium" class="action-box" label-width="0px">
        <el-button type="primary" @click="goBackStep">
          <i class="el-icon-arrow-left el-icon--left"></i>上一步
        </el-button>
        <el-button type="primary" @click="goNextStep('parkBaseInfo')">
          下一步
          <i class="el-icon-arrow-right el-icon--right"></i>
        </el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="选取车场经纬度"
      :visible.sync="mapUI_data.dialogVisible"
      width="750px"
      class="zb-dialog dialog-container map-dailog"
      custom-class="zb-center-dialog"
      :close-on-click-modal="false"
    >
      <div class="dialog-content">
        <!-- 搜索输入框 -->
        <div class="search-box">
          <div class="input-item">
            <input id="tipinput" type="text" autocomplete="off" placeholder="请输入车场关键字搜索" />
          </div>
          <div class="rs-box">
            <img src="../../../../../assets/img/ic_coordinate.svg" alt />
            <span>坐标：</span>
            <span>{{mapUI_data.selectPos.x}},{{mapUI_data.selectPos.y}}</span>
          </div>
        </div>
        <div id="park-map"></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" @click="setMapPos">确 定</el-button>
        <el-button size="medium" plain @click="mapDailogHide">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pageScript from "./index.js";
export default pageScript;
</script>

<style lang="less" scoped>
@import "../FormContent.less";
.zb-form {
  width: 480px;
}

.dialog-container {
  display: flex;
  justify-content: center;
  align-items: center;
  .dialog-content {
    margin: -30px -20px;
    position: relative;
    .search-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background: #fff;
      height: 54px;
      z-index: 10;
      display: flex;
      align-items: center;
      .input-item {
        flex: 1;
        text-align: center;
        > input {
          width: 300px;
          height: 34px;
          background-image: url(../../../../../assets/img/ic_search.svg);
          background-repeat: no-repeat;
          background-position: 10px center;
          outline: none;
          border: 1px solid #d7dce2;
          border-radius: 4px;
          padding-left: 36px;
        }
      }
      .rs-box {
        flex: 1;
        line-height: 25px;
        img {
          position: relative;
          bottom: 2px;
        }
        span {
          &:first-child {
            color: #999999;
          }
          &:last-child {
            color: #474747;
            font-weight: 600;
          }
        }
      }
    }
  }
  .el-dialog {
    #park-map {
      height: 550px;
    }
  }
}
.el-upload__tip {
  position: relative;
  .demo-icon {
    position: absolute;
    right: 20px;
    transform: translateX(100%);
  }
}
</style>

<style lang="less">
@import "../../../../../assets/less/base/zbForm.less";
</style>
